<template>
	<view class="content">
		<!-- <image src="/static/home/bg_logo.png" class="backgroungBc" mode="center"></image> -->
		<view class="selectBox">
			<view class="checkGoods" v-for="(item,index) in wayList" :key="index" @click="goPages(index)">
				<image class="icon" :src="item.icon"></image>
				<view class="">
					<view class="title">
						{{item.title}}
					</view>
					<view class="comment">
						{{item.comment}}
					</view>
				</view>

			</view>
		</view>
		<!-- 商品扫描 弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="add_main">
				<p class="text_top_popup">商品扫描<uni-icons class="icon" color="#aaa" @click="popup.close()" size="20"
						type="closeempty"></uni-icons></p>
				<uni-easyinput suffixIcon="scan" placeholderStyle="font-size:28rpx;" v-model="code"
					placeholder="请输入或扫描机身编码报单" @iconClick="iconClick"></uni-easyinput>
				<button class="onlogout" @click="addCode"><span>确定</span></button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import {
		onLoad, onUnload
	} from '@dcloudio/uni-app'
	import store from '@/store/index.js'
	import apiCode from "@/util/api/code.js";
	import roleStore from '@/store/role-play.js'
	const wayList = ref([{ icon: '/static/home/goods_blue.svg', title: '选择商品申请', comment: '根据产品类申请' },
	{ icon: '/static/home/sm.svg', title: '商品扫码申请', comment: '扫码/输入编码' },
	{ icon: '/static/home/history.svg', title: '历史工单申请', comment: '通过工单申请' }])
	const popup = ref()
	const code = ref('')
	const addOpen = () => {
		//打开弹窗
		popup.value.open()
	}
	onUnload(() => {
		uni.hideLoading()
	})
	onLoad(e => {
		// if (e.type) {
		// 	store.commit('setWayType', {
		// 		id: e.moduleCode,
		// 		name: e.type == 1 ? '安装' : e.type == 2 ? '维修' : e.type == 3 ? '保养' : '其他',
		// 		type: e.type,//1安装
		// 		factoryId: e.factoryCode || ''
		// 	})
		// }
		// // if (!e.factoryCode) {
		// // 	uni.navigateTo({
		// // 		url: "/pages/home/add"
		// // 	})
		// // }
		// roleStore.commit('set_rolePlay', 'u-user')
	})
	const goPages = (val) => {

		switch (val) {
			case 0:
				store.commit('setorderGoodsTypes', [])
				store.commit('setchackFaultList', [])
				store.commit('setchackFaultItem', { id: null })
				store.commit('setcheckBrandItem', { id: null })
				store.commit('setcheckClassifyItem', { id: null })
				store.commit('setappointmentTime', null)
				store.commit('setUserOrder', {
					"address": "", //客户详细地址
					"area": "", //地址-县/区
					"city": "", //地址-市
					"helpOtherCreateOrder": false, //	是否代他人建单：0-否，1-是	
					"name": "", //客户姓名
					"otherPhone": "", //其他电话
					"phone": "", //客户手机号
					"province": "", //地址-省
					"town": "", //地址-镇
					"userId": null
				})
				// 去品牌分类页面
				uni.navigateTo({
					url: '/pages/home/way/applygoods'
				})
				break;
			case 1:
				addOpen()
				break;
			case 2:
				// 去历史工单申请
				uni.navigateTo({
					url: '/pages/home/way/history'
				})
				break;
		}
	}
	// 调起客户端扫码界面，扫码成功后返回对应的结果。
	const iconClick = () => {
		uni.scanCode({
			scanType: ['qrCode', 'barCode'],//扫码类型
			success: async function (res) {
				code.value = res.result
				await addCode()
			},
			fail: (err) => {
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: '设备不支持此功能',
					duration: 3000
				})
				// #endif

			}
		})
	}
	//商品扫码报单
	const addCode = async () => {
		if (code.value) {
			uni.showLoading({
				title: "加载中...",
			})
			await apiCode.getRegisterSecurityCheck({ code: code.value }).then(res => {
				if (res.code == 20000) {
					// 判断是否登记激活
					if (!res.data.row.register) {
						popup.value.close()
						uni.navigateTo({
							url: '/pages/card/acitvation?id=' + code.value + '&isOrder=true'
						})
					} else {
						store.commit('setorderGoodsTypes', [])
						store.commit('setchackFaultList', [])
						store.commit('setchackFaultItem', { id: null })
						store.commit('setcheckBrandItem', { id: null })
						store.commit('setcheckClassifyItem', { id: null })
						store.commit('setappointmentTime', null)
						store.commit('setUserOrder', {
							"address": "", //客户详细地址
							"area": "", //地址-县/区
							"city": "", //地址-市
							"helpOtherCreateOrder": false, //	是否代他人建单：0-否，1-是	
							"name": "", //客户姓名
							"otherPhone": "", //其他电话
							"phone": "", //客户手机号
							"province": "", //地址-省
							"town": "", //地址-镇
							"userId": null
						})
						popup.value.close()
						uni.navigateTo({
							url: '/pages/home/add?code=' + code.value
						})
					}
					code.value = ''
				}
			})

			uni.hideLoading()
		} else {
			uni.showToast({
				title: '请先输入编码',
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f6f7fa;
		background-image: url('/static/home/bg_logo.png');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		box-sizing: border-box;

		.add_main {
			background-color: #fff;
			border-radius: 20rpx;
			width: 80vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 34rpx;
			box-sizing: border-box;

			.text_top_popup {
				text-align: center;
				font-size: 28rpx;
				padding: 0rpx 0 20rpx;
				width: 100%;
				position: relative;

				.icon {
					position: absolute;
					right: 0rpx;
					font-weight: 500;
				}
			}

			.onlogout {
				font-size: 28rpx;
				margin: 30rpx 20rpx 0;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				width: 100%;
				color: #fff;
				background-color: #007cff;
			}

			:deep(.is-input-border) {
				// border-radius: 50rpx !important;
				background-color: rgba(243, 244, 248, 1) !important;
				padding: 10rpx;
				margin-top: 20rpx;
				border: none;
				height: 80rpx !important;
				line-height: 80rpx;
				font-size: 28rpx
			}
		}
	}

	// .backgroungBc {
	// 	width: 100%;
	// 	height: 100%;
	// }

	.selectBox {
		width: 100%;
		height: 80%;
		position: absolute;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: column;

		.checkGoods {
			width: 50%;
			height: 14%;
			background-color: rgba(255, 255, 255, 0.8);
			border-radius: 20rpx;
			display: flex;
			padding: 24rpx;
			align-items: center;

			.icon {
				width: 100rpx;
				height: 100rpx;
				margin-right: 30rpx;
			}

			.title {
				font-size: 30rpx;
				font-weight: 700;
			}

			.comment {
				font-size: 28rpx;
				margin-top: 20rpx;
				color: #7f7f7f;
			}
		}
	}
</style>